<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    :is-loading="loading"
    destroy-on-close
    @closeDialog="resetTemp"
    @comfirmBtn="handleConfirm"
  >
    <DtForm :form-opts="config" :width-size="1" :ref-obj.sync="config.ref" />
  </dtDialog>
</template>
<script>
import pluginConfigApi from '@/framework/api/developerCenter/application-system/pluginConfig'

export default {
  props: {
    pluginType: {
      type: Number
    }
  },
  data() {
    return {
      textMap: {
        create: '新增插件',
        update: '修改插件'
      },
      dialogStatus: '',
      dialogVisible: false,
      loading: false,
      config: {
        ref: null,
        labelWidth: '84px',
        formData: {
          formId: '',
          className: '',
          remark: '',
          enable: 1
        },
        labelPosition: 'right',
        columns: [
          {
            label: '插件路径',
            prop: 'className',
            type: 'textarea',
            component: 'el-input',
            maxlength: 100
          },
          {
            label: '描述',
            prop: 'remark',
            type: 'textarea',
            component: 'el-input',
            maxlength: 100
          },
          {
            label: '是否启用',
            prop: 'enable',
            type: 'switch',
            component: 'el-switch',
            bind: {
              'active-value': 1,
              'inactive-value': 0
            }
          }
        ],
        rules: {
          className: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入插件路径'
            }
          ]
        }
      }
    }
  },
  methods: {
    openDialog(type, row) {
      this.resetTemp()
      this.dialogVisible = true
      if (type == 'create') {
        this.dialogStatus = 'create'
      } else {
        this.dialogStatus = 'update'
        pluginConfigApi.customFormPluginDetail({ id: row.id }).then((res) => {
          this.config.formData = res.data
        })
      }
      this.config.formData.formId = this.$route.query.formId
    },
    resetTemp() {
      Object.assign(
        this.$data.config.formData,
        this.$options.data().config.formData
      )
      this.config.formData = {
        formId: '',
        className: '',
        remark: '',
        enable: 1
      }
      if (this.config.ref) {
        this.$nextTick(() => {
          this.config.ref.resetFields()
        })
      }
    },
    handleConfirm() {
      this.config.ref.validate((valid) => {
        if (valid) {
          this.loading = true
          this.config.formData.type = this.pluginType
          const fn = this.dialogStatus == 'create' ? pluginConfigApi.customFormPluginAdd : pluginConfigApi.customFormPluginEdit
          fn(this.config.formData).then((res) => {
            if (this.config.formData.type == 2) {
              this.$emit('getFormPlugin')
            } else {
              this.$emit('getPluginList')
            }
            this.$dtMessage({
              message: this.dialogStatus == 'create' ? '新增成功' : '修改成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-switch{
  width: 40px !important;
}
</style>

